<template>
	<view>
		<view class="cu-bar bg-white">
			<view class="action">
				<navigator open-type="navigateBack">
					<text class="cuIcon-back text-gray"></text> 返回
				</navigator>
			</view>
			<view class="content text-bold">
				我的优惠券
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabList" :key="index"
				@tap="tabSelect" :data-id="index">
				{{item}}
			</view>
		</scroll-view>

		<view class="cu-list menu-avatar">
			<view class="cu-item grayscale" v-for="(item,tow) in recordList" :key="tow"
				:class="[toggleDelay?'animation-slide-bottom':'']" :style="[{animationDelay: (tow + 1)*0.1 + 's'}]" v-show="TabCur == item.cutitle">
				<block>
					<view class="cou-imgs">
						<image style="width: 100%;height: 100%;" src="../../static/image/temp/conIcon.png" mode="">
						</image>
					</view>
					<view class="cou-text">
						<view class="">满30-5元立减券</view>
						<view class="">部分商品可用</view>
						<view class="">有效期： 2022-01-11 23:59</view>
					</view>
					<button type="default">去使用</button>
					<view class="">
						{{item.cutitle}}
					</view>
				</block>
			</view>
			<view class="" v-show="recordList == 0">
				您还没有优惠券
			</view>
		</view>
	</view>

</template>

<script>
	import recordList from "../../static/js/Cart.json"
	export default {
		data() {
			return {
				recordList: [],
				tabList: ["进行中", "历史", "退单"],
				TabCur: 0,
				scrollLeft: 0,
				animation: '',
				toggleDelay: false
			}
		},
		onLoad() {
			this.ToggleDelay()
			this.recordList = recordList.coupn
			console.log("ssss",recordList.coupn)
		},
		methods: {
			ToggleDelay() {
				this.toggleDelay = true;
				setTimeout(() => {
					this.toggleDelay = false
				}, 1500)
			},
			tabSelect(e) {
				// console.log("showsele", e.currentTarget.dataset.id)
				this.ToggleDelay()
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		}
	}
</script>

<style lang="less">
	.cou-imgs {
		width: 200rpx;
		height: 100%;
	}
</style>
